<div class='need-top'>
  <div class='need-tit'>
    <div class='tit-box' [@fadeInUp] *ngIf="startAnimationTit">
      为什么要做这个网站？
      <div class='icon-wrap'>
        <div class='protect-icon'>
          <i class="fa fa-shield" aria-hidden="true"></i>
        </div>
      </div>
    </div>
  </div>

  <div class=' need-detail' [@fadeInUp] *ngIf="startAnimationDet">
    <p> 古诗是中华民族乃至全世界的瑰宝，我们应该传承下去， 虽然有古典文集， 但大多数人并没有拥有这些书籍。  </p>
    <p> 从某种意义上来说，这些庞大的文集离我们是有一定距离的。因此本网站诞生了，你可以在此享受诗词的饕餮盛宴。</p>
  </div>
</div>

<div class='need-bottom container-fluid'>

  <div class="row layout ">

    <div class='auto-reasons' [@fadeInUp] *ngIf="startAnimationDet">

      <div class="col-md-3 col-sm-12 need-reasons reasons-color1">
        <div class='reasons-wrap'>
          <div class='reasons-icon'>
            <i class="fa fa-edit"></i>
          </div>
          <div class='reasons-tit'> 你需要诗意 </div>
          <p class='reasons-det'>你需要诗意,你需要诗意</p>
          <div class='reasons-btn'>了解更多 <i class="anticon anticon-arrow-right btn-arrows"></i> </div>
        </div>
      </div>

      <div class="col-md-3 col-sm-12 need-reasons reasons-color2">
        <div class='reasons-wrap'>
          <div class='reasons-icon'>
            <i class="fa fa-laptop"></i>
          </div>
          <div class='reasons-tit'> 你需要诗意 </div>
          <p class='reasons-det'>你需要诗意,你需要诗意</p>
          <div class='reasons-btn'>了解更多 <i class="anticon anticon-arrow-right btn-arrows"></i> </div>
        </div>
      </div>

      <div class="col-md-3  col-sm-12 need-reasons reasons-color3">
        <div class='reasons-wrap'>
          <div class='reasons-icon'>
            <i class="fa fa-code"></i>
          </div>
          <div class='reasons-tit'>你需要诗意 </div>
          <p class='reasons-det'>你需要诗意,你需要诗意</p>
          <div class='reasons-btn'>了解更多 <i class="anticon anticon-arrow-right btn-arrows"></i> </div>
        </div>
      </div>

      <div class="col-md-3 need-reasons reasons-color4">
        <div class='reasons-wrap'>
          <div class='reasons-icon'>
            <i class="fa fa-lightbulb-o"></i>
          </div>
          <div class='reasons-tit'> 你需要诗意</div>
          <p class='reasons-det'>你需要诗意,你需要诗意</p>
          <div class='reasons-btn'>了解更多 <i class="anticon anticon-arrow-right btn-arrows"></i> </div>
        </div>
      </div>

    </div>

  </div>

</div>